<template>
	<el-container class="RCIM-abnhandle_view">
		<div
			class="smailbg"
			:class="{ showSmallBtn: smallStyle }"
			@click="changeShowBar()"
		>
			<span class="iconfont icondiandian"></span>
		</div>

		<el-aside
			class="kd-left-tree-wrap"
			width="200px"
			:class="{ showSmallWrap: showTree }"
		>
			<div class="unchange_tree_wrap">
				<archives-tree
					v-bind="$attrs"
					@handleEvent="treeHandle"
					:data="menus"
				></archives-tree>
			</div>
		</el-aside>
		<el-container v-loading="loading">
			<el-main>
				<div id="downloadView">
					<el-header
						style="position:relative;font-size: 12px;height:140px"
					>
						<el-button @click="exportPdf" v-if="isDownLoad">导出</el-button>
						<vmark :isHandle="isHandle"></vmark>
					</el-header>
					<div v-if="title.enterprise" class="form_item_title">
						{{ title.enterprise }}
					</div>
					<div class="v-table">
						<div
							class="v-table-item"
							:style="{ width: item.width }"
							v-for="item in tableLayout"
						>
							<label class="v-table-label">{{ item.label }}</label>
							<div class="v-table-value">
								{{ tableVal[item.key] || '-' }}
							</div>
						</div>
					</div>
					<div class="form_item_title">
						{{ title.trend }}
					</div>
					<div class="trend_wrap" v-loading="isLoading">
						<theme-fish  :chartData="chartData" :lineData="lineData" @clickFish="clickFish"></theme-fish>
					</div>
					<div class="form_item_title">
						{{ title.conclusion }}
					</div>
					<div class="conclusion_wrap" >
						<div v-if="isHandle" v-html="abnormalData.conclusionCon"></div>
						<div v-else style="text-align: center">
							<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="conclusionCon">
							</el-input>
							<el-button style="margin-top: 10px;" type="primary" @click="submit">提交</el-button>
						</div>
					</div>
				</div>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import ArchivesTree from "@/components/luyiming/ArchivesTree/index.vue";
import ThemeFish from "@/components/luyiming/ThemeFish/index.vue";
import { getStatus, queryTrendData } from "@/api/RCIM/RCIM-historyTrend.js"
import vmark from "@/components/mark/mark.vue";
import moment from "moment";
import { debounce } from "@/utils";
export default {
	components: {
		ArchivesTree,
		vmark,
		ThemeFish
	},
	props: {
		// chartData: {
		// 	// 图标数据
		// 	type: Object,
		// 	default: () => {
		// 		return {
		// 			data: [],
		// 			xdata: [],
		// 			efData: [],
		// 			vmap: []
		// 		};
		// 	}
		// },
		// isHandle: {
		// 	type: Boolean,
		// 	default: () => false
		// },
		loading: {
			type: Boolean,
			default: () => (false)
		},
		menus:{
			type: Array,
			default: () =>([])
		},
		abnormalData: {
			type: Object,
			default: () => {
				return {
					tableVal: {
						sourceCode: "",
						nuclideName: "",
						abnormalType: "",
						checkDose: "",
						abnormalTime: "",
						alarmContent: ""
					}
				};
			}
		},
		listQuery: {
			type: Object,
			default: () => (
				{
					id: '',
					startTime: '',
					endTime: ''
				}
			)
		},
	},
	watch: {
		abnormalData(val) {
			this.tableVal = val.tableVal
			this.isHandle = val.isHandle
			this.title.enterprise = val.enterpriseName
		},
		listQuery(value){
			if(value.id){
				this.isLoading = true;
				this.getFishData().then(res=> {
					this.getLineData({
						startTime:  this.list[0].from,
						endTime: this.list[0].to,
						type: this.type,
					}).then(res => {
						this.isLoading = false;
					})
				}).catch(err => {
					this.isLoading = false;
					this.data = []
					this.list = []
					this.chartData = this.parseData()
				})
			}
		}
	},
	data() {
		return {
			isDownLoad: true,
			isLoading: false,
			htmlTitle: '',
			conclusionCon:"",
			title: {
				enterprise: "",
				trend: "异常趋势",
				conclusion: "处理结论"
			},
			isHandle: false,
			tableVal: {
				sourceCode: "",
				nuclideName: "",
				abnormalType: "",
				checkDose: "",
				abnormalTime: "",
				alarmContent: ""
			},
			tableLayout: [
				{
					label: "源国家编码",
					key: "sourceCode",
					width: "50%"
				},
				{
					label: "核素名称",
					key: "nuclideName",
					width: "50%"
				},
				{
					label: "异常类型",
					key: "abnormalType",
					width: "50%"
				},
				{
					label: "检查剂量",
					key: "checkDose",
					width: "50%"
				},
				{
					label: "异常时间",
					key: "abnormalTime",
					width: "100%"
				},
				{
					label: "报警内容",
					key: "alarmContent",
					width: "100%"
				}
			],
			// menus: [],
			// chartData: {
			// 	data: [],
			// 	xdata: [],
			// 	efData: [],
			// 	vmap: []
			// },
			smallStyle: false,
			showTree: false,
			type:'1',
			list: [],
			data: [],
			lineData: {},
			chartData: {},
			colorList: {
				"入库": '#1890ff',
				"作业": '#a84bf9',
				"运输": '#f43333',
    			"出库": '#ffb870',
    			"在库": '#67C23A',
			},
			dateUit: 'minute',
			abnormalId: ""
		};
	},
	mounted() {
		this.resizeHandOwn = debounce(() => {
			this.resizePage();
		}, 300);
		this.tableVal = this.abnormalData.tableVal
		this.resizePage();
		window.addEventListener("resize", this.resizeHandOwn);
	},
	methods: {
		resizePage() {
			let windowWidth = document.body.clientWidth;
			if (windowWidth < 1280) {
				this.smallStyle = true;
				this.showTree = true;
			} else {
				this.smallStyle = false;
				this.showTree = false;
			}
		},
		changeShowBar() {
			this.showTree = !this.showTree;
		},
		treeHandle(val) {
			this.abnormalId = val.id
			this.$emit("handleClick", val);
		},
		submit() {
			this.$emit('submit',{conclusionCon:this.conclusionCon,id: this.abnormalId})
		},
		exportPdf() {
			this.isDownLoad = false;
			this.$confirm('确认要导出吗？')
				.then(_ => {
					this.htmlTitle = '异常';
					this.getPdf('#downloadView').then(
						res => this.isDownLoad = true
					)
				})
				.catch(_ => {
					this.isDownLoad = true;
				});

		},
		getLineType(){
			let typeStr = '';
			let formatRule = '';
			switch (this.type) {
				case '2':
					typeStr = 'hour';
					formatRule = 'YYYY-MM-DD HH'
					break;
				case '3':
					typeStr = 'day';
					formatRule = 'YYYY-MM-DD'
					break;
				default:
					typeStr = 'minute';
					formatRule = 'YYYY-MM-DD HH:mm'
			}
			return {
				typeStr,
				formatRule,
			};
		},
		getLineData(query){
			const params = Object.assign({}, this.listQuery, query)
			const {typeStr, formatRule} = this.getLineType()
			return queryTrendData(params).then(res => {
				const result = {
					vData: [],
					xData: [],
				}
				if( res.data instanceof Array ){
					res.data.map(item => {
						result.xData.push( moment(item.time).format(formatRule) )
						result.vData.push(item.value)
					});
				}
				if(result.xData.length === 0){
					let itemBtw = moment(params.endTime).diff(params.startTime, typeStr) + 1
					let xData = new Array(itemBtw).fill(1)
					let startTime = params.startTime;
					xData = xData.map(
						(item, indet) => {
							const itObj = moment(startTime).add(indet, typeStr).format(formatRule)
							return itObj
						}
					)
					result.xData = xData;
				}
				this.lineData = result;
			})
		},
		getFishData(){
			return getStatus(this.listQuery).then(res => {
				if( res.data?.timeLine && (res.data?.timeLine instanceof Array) ){
					this.list = res.data?.timeLine.map(item => {
						item.from = item.form;
						return item
					})
				}else{
					this.list = []
				}
				this.chartData = this.parseData()
			})
		},
		parseData(a){
			const {typeStr, formatRule} = this.getLineType()
			let len = 0;
			const optionsData = {
				data: [],
				xdata: [],
				efData: [],
				vmap: [],
				scaData:[],
			}
			const _self = this;
			optionsData.vmap = this.list.map( (item, index) => {
				// debugger

				let itemBtw = 1
				if(item.to){
					itemBtw = 20; //moment(item.to).diff(item.from, _self.dateUit)
				}
				console.log(itemBtw)
				let whileIndex = 1;
				optionsData.data.push(_self.getItemLineData('symbol'))
				optionsData.xdata.push(item.from)
				optionsData.scaData.push(_self.getScatterData('symbol', item.from))
				optionsData.efData.push(_self.getItemSymleData('symbol', item.status, index === 0 ? 'render': 'emphasis', index))
				for( ; whileIndex < itemBtw; whileIndex ++ ){
					optionsData.data.push(_self.getItemLineData())
					optionsData.xdata.push(moment(item.from).add(whileIndex, _self.dateUit).format(formatRule))
					optionsData.scaData.push(_self.getScatterData())
					optionsData.efData.push(_self.getItemSymleData())
				}
				const result = {
					gte: len,
					lt: len + itemBtw,
					color: _self.colorList[item.status],
				}
				len += itemBtw
				return result
			})
			console.log(optionsData)
			return optionsData
		},
		getLineXdata(){

		},
		getItemLineData(type){
			const itemLineSymbelData = {
				value: 1,
				symbol: 'none' ,
			}
			const itemData = {
				value: 1,
				symbol: 'none',
			}
			if(type === 'symbol') {
				console.log('====',itemLineSymbelData)
				return itemLineSymbelData
			}else{
				return itemData
			}
		},
		getScatterData(type, times){
			const itemSymbelData = {
				value: 1,
				times,
				symbolSize: 1,
			}
			const itemData = {
				value: 1,
				symbol: 'none',
			}
			if(type === 'symbol') {
				return itemSymbelData
			}else{
				return itemData
			}
		},
		getItemSymleData(type, status, rip, index){
			const itemSymbelData = {
				value: 1,
				status,
				index,
				symbolSize: 12,
				showEffectOn: rip,
				itemStyle: {
					color: this.colorList[status],
					shadowBlur: 10,
					shadowColor: '#333',
					borderWidth: '10',
					boderColor: '#000'
				},
			}
			const itemData = {
				value: 1,
				symbol: 'none',
			}
			if(type === 'symbol') {
				return itemSymbelData
			}else{
				return itemData
			}
		},
		clickFish(params){
			console.log('params',params)
			const index = params.index
			this.getLineData({
				startTime:  this.list[index].from,
				endTime: this.list[index].to,
				type: this.type,
			})
		},
	}
};
</script>

<style lang="scss">
.RCIM-abnhandle_view {
	position: relative;
	.showSmallWrap {
		width: 0 !important;
	}
	.unchange_tree_wrap {
		min-width: 200px !important;
		width: 200px;
		height: 100%;
	}
	.download {
		position: absolute;
		left: 230px;
		top:20px;
	}
	.smailbg {
		width: 0px;
		height: 15px;
		left: -11px;
		transition: width 0.5s;
		cursor: pointer;
		top: 80px;
		z-index: 99;
		transform: rotateZ(90deg);
		@include ladderShaped(#304156);
		position: absolute;
		span {
			transform: rotateZ(90deg);
			display: block;
			text-align: center;
			color: #fff;
		}
	}
	.smailbg.showSmallBtn {
		width: 40px;
	}
	.form_item_title {
		line-height: 50px;
		@include lineLeftTitle();
	}
	.v-table {
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
		margin-left: 2%;
		width: 96%;
		.v-table-item {
			border-bottom: 1px solid #ccc;
			border-right: 1px solid #ccc;
			display: inline-block;
			vertical-align: top;
			height: 40px;
			line-height: 40px;
			.v-table-label {
				width: 130px;
				height: 100%;
				font-weight: 100;
				text-align: center;
				display: inline-block;
				vertical-align: top;
				background-color: #d5e9fa;
				border-right: 1px solid #ccc;
			}
			.v-table-value {
				display: inline-block;
				vertical-align: top;
				width: calc(100% - 136px);
				height: 100%;
				text-align: center;
			}
		}
	}
	.trend_wrap {
		width: 100%;
		padding-left: 30px;
		height: 500px;
	}
	.conclusion_wrap {
		width: 100%;
		color: #485563;
		padding-left: 30px;
	}
}
.layout_2 .RCIM-abnhandle_view {
	height: calc(100vh - #{$headerRouterHeight + $footerWidth});
	.kd-left-tree-wrap {
		width: 200px;
		padding: 10px 0;
		margin-bottom: 0;
		overflow-x: hidden;
		// margin-right: 15px;
		background-color: #fff; //#D3DCE6;
		border-right: 1px solid #eee;
	}
}
</style>
